import * as React from "react";
import "@/css/Home.less"
import TextItem from "@/pages/home/TextItem";
import {Button,message} from 'antd';
import eventBus from "@/hooks/events";
import {axiosRequest} from "@/service";
import Right from "@/pages/right";

interface IArticle {
    "id": string
    "title": string
    "content": string
    "author": string
    "abstract": string
    "publish_time": string
    "encourage_num": number
    "views_num": number
    "cover_pic": string
    "status": number
    "update_by": string
    "update_time": string
    "classify_one": string
    "classify_two": string
}

class Home extends React.Component<any, any> {
    constructor(props: any) {
        super(props);
        this.state = {
            textList:[]
        }
        eventBus.on('search', this.getArticleList.bind(this))
        const params = {
            classifyOne: '001',
            classifyTwo: '002',
            titleKey: ''
        }

        this.getArticleList(params)
    }

    componentWillUnmount(){
        eventBus.on('search',this.getArticleList.bind(this))
        //清除该bus事件
    }

    getArticleList = (param: { classifyOne: string; classifyTwo: string; titleKey: string }) => {
        const config = {
            url: 'queryArticle',
            method: 'post',
            data:param
        }
        axiosRequest(config).then((res:any) => {
            this.setState(Object.assign({}, this.state, {textList: res.data}));
        }).catch((err:any) => {
            message.error('查询文章列表失败！')
            console.error('this is a error', err)
        })
    }

    getListData(){
        return this.state.textList && this.state.textList.map((item: IArticle) => {
            return <TextItem item={item} key={item.id}/>
        })
    }

    render() {

        return (
            <div className="main-home">
                <div className="home-mid">

                    <ul className="home-ul">
                        {this.getListData()}
                    </ul>
                    <Right></Right>
                </div>
            </div>
        )
    }
}

export default Home
